// 通过dom操作获取对应的元素
// 获取到所有的滑动门内容详情的元素  元素的集合
var dateils_uls = document.getElementsByClassName("nav-list-dateils");
// 获取到所有鼠标悬停的元素   元素的集合
var li_as = document.querySelectorAll(".nav-bar-shop>li>a");
// 对所有的li中的a元素添加事件监听，监听鼠标悬停再哪一个li上
for (var i = 0; i < li_as.length; i++) {
	li_as[i].addEventListener('mouseover',function(event){
		// 获取当前对应的元素  类似于this
		var li_a = event.target;
		//将元素集合转为数组
		var list_li_as = Array.from(li_as);
		//通过数组中的函数获取对应元素的索引
		var li_a_index = list_li_as.indexOf(li_a);
		//先将dateils_uls中所有的ul的opacity属性改为0
		for (var i = 0; i < dateils_uls.length; i++) {
			dateils_uls[i].style.opacity = 0;
		}
		//从dateils_uls中区获取对应索引的ul,并修改他的opacity属性1
		dateils_uls[li_a_index].style.opacity = 1;
	})
}

// 搜索区域得鼠标悬停在搜索按钮上时 输入框得边框颜色变亮
//获取搜索按钮
var btn = document.getElementById('search-btn');
//获取输入框元素
var input = document.getElementById('search-input');
//对按钮添加监听，监听鼠标悬停事件
btn.addEventListener('mouseover',function(){
	//修改输入框得css样式
	// input.style.borderColor = '#b0b0b0';
	//动态添加CSS的class属性值
	input.classList.add("active-input");
	btn.classList.add("active-button");
})
//对按钮添加监听，监听鼠标移出事件
btn.addEventListener('mouseleave',function(){
	//修改输入框得css样式
	// input.style.borderColor = '#e0e0e0';
	//删除CSS对应的class属性值
	input.classList.remove("active-input");
	btn.classList.remove("active-button");
})
//对搜索框添加监听，监听鼠标悬停事件
input.addEventListener('mouseover',function(){
	//动态添加CSS的class属性值
	input.classList.add("active-input");
	btn.classList.add("active-button");
})
//对搜索框添加监听，监听鼠标移出事件
input.addEventListener('mouseleave',function(){
	//删除CSS对应的class属性值
	input.classList.remove("active-input");
	btn.classList.remove("active-button");	
})

//搜索框获取焦点事件
input.addEventListener('focus',function(){
	input.classList.add("focus-input");
	btn.classList.add("focus-button");
})
//获取搜索框失去焦点事件
input.addEventListener('blur',function(){
	input.classList.remove("focus-input");
	btn.classList.remove("focus-button");
})

//搜索框中占位符的内容
var search_list_text = ['热水器','小米手环9','笔记本','Redmi K70至尊版','门锁','充电宝'];
//占位符内容数组的索引
var search_index = 0;
//定时切换搜索框中的占位符
setInterval(function(){
	if(search_index >= 5){
		search_index = 0
	}else{
		search_index++;
	}
	input.placeholder = search_list_text[search_index];
},3000)




